import axios from 'axios'
import { getToken } from './auth'
import router from '@/router'
import { Message } from 'element-ui'
import store from '@/store'

const service = axios.create({
  baseURL: 'https://api-hmzs.itheima.net/api',
  timeout: 5000 // request timeout
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // token注入
    const token = getToken()
    if (token) {
      // 一般来讲token是加到请求头的 Authorization 字段上的，但不完全是这样，具体要看后端的处理
      // 具体怎么加，以实际情况（后端的要求）为准
      // config.headers.apiKey = token
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  // 响应的状态为 200 段的时候调用
  response => {
    // 这种场景表示接口调用成功但是业务失败
    if (response.data.code !== 10000) {
      Message.error(response.data.msg)
      return Promise.reject(response.data)
    }
    return response.data
  },
  // 响应状态码不为 200 段时调用
  error => {
    // token失效以后会得到401状态码
    if (error.response?.status === 401) {
      // 1. 跳转到登录
      router.push('/login')
      // 2. 清空用户数据
      store.commit('user/setToken')
    }
    // 接口调用直接失败 ==> 业务一定失败
    // 如果接口超时也会进这里，此时 error 就没有 response 字段，为了容错，最好加上可选链?
    Message.error(error.response?.data?.msg || '发送请求时出现了错误')
    return Promise.reject(error)
  }
)

export default service
